<template>
    <div>
        <el-scrollbar style="height:calc(90vh - 200px) !important;">
            <el-form ref="cardCollageFormRef" :model="form" :rules="rules" label-width="80px" :disabled="props.isView" scroll-to-error>
                <el-card class="box-card" style="margin-top: 20px">
                    <template #header>
                        <div style="display: flex;align-items: center;">
                            <div>
                                <span style="font-weight: bold">
                                    <el-icon color="red">
                                        <CollectionTag />
                                    </el-icon>
                                    组队配置</span>
                            </div>
                            <div style="margin-left: 30px">
                                <el-tooltip class="item" effect="dark"
                                    content="选择拼团上架时间,自动上架即审核通过后立即上架,手动上架在审核通过后需商家操作上架" placement="top">
                                    <el-switch v-model="form.cardCollageDetailBo.isAutomaticShelf"
                                        active-color="#13ce66" inactive-color="#ff4949" active-value="1"
                                        inactive-value="0" active-text="自动上架" inactive-text="手动上架">
                                    </el-switch>
                                </el-tooltip>
                            </div>
                        </div>
                    </template>
                    <div class="card-body">
                        <el-form-item label="拼团名称" prop="collageName">
                            <el-input v-model="form.collageName" :rows="1" maxlength="255" show-word-limit
                                placeholder="请输入拼团名称" />
                        </el-form-item>
                        <el-row :gutter="24">
                            <el-col :span="6" :offset="0">
                                <el-form-item label="规格" prop="specifications">
                                    <el-select v-model="form.specifications" placeholder="请选择规格">
                                        <el-option label="原箱" value="原箱"></el-option>
                                        <el-option label="mini箱" value="mini箱"></el-option>
                                        <el-option label="多盒" value="多盒"></el-option>
                                        <el-option label="单盒" value="单盒"></el-option>
                                        <el-option label="包" value="包"></el-option>
                                        <el-option label="国宝季" value="国宝季"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="数量" prop="count">
                                    <el-input v-model="form.count" placeholder="请输入数量" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="拼团张数" prop="sheetsNumber">
                                    <el-input v-model="form.sheetsNumber" placeholder="请输入拼团张数" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="拼团类别" prop="collageModule">
                                    <el-select v-model="form.collageModule" placeholder="请选择拼团类别">
                                        <el-option label="原盒" value="1"> </el-option>
                                        <el-option label="搓搓乐" value="2"> </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="24" :offset="0">
                                <el-form-item label="选择卡密" prop="cardCategoryId">
                                    <el-button type="primary" icon="plus" size="default" @click="selectCardMi"
                                        v-if="form.cardCategoryId == '' || form.cardCategoryId == null || form.cardCategoryId == undefined">请选择卡密</el-button>
                                    <el-link :underline="false"
                                        :style="{ color: 'blue', fontSize: '16px', paddingLeft: '15px' }"
                                        @click="selectCardMi" :disabled="props.isView"
                                        v-if="form.cardCategoryId != '' && form.cardCategoryId != null || form.cardCategoryId != undefined">{{
                                            cardCategoryName || form.cardCategoryName }}</el-link>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="随机方式" prop="playWay">
                                    <!-- 玩法(字典) -->
                                    <el-select v-model="form.playWay" placeholder="请选择玩法"
                                        @change="getCardSeriesLotCountFun">
                                        <el-option v-for="dict in collagePlayWayList" :key="dict.value"
                                            :label="dict.label" :value="dict.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5" :offset="0">
                                <el-form-item label="是否允许赠送卡密" prop="isGive" label-width="130px">
                                    <el-radio-group v-model="form.cardCollageDetailBo.isGive">
                                        <el-radio v-for="dict in sys_yes_no" :key="dict.value" :value="dict.value">
                                            {{ dict.label }}
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5" :offset="0">
                                <el-form-item label="是否开启代搓" prop="isReplaceOpen" label-width="130px">
                                    <el-radio-group v-model="form.isReplaceOpen">
                                        <el-radio v-for="dict in sys_yes_no" :key="dict.value" :value="dict.value">
                                            {{ dict.label }}
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5" :offset="0" v-if="form.isReplaceOpen == '1' ">
                                <el-form-item label="最低代搓份数" prop="replaceOpenCountMin" label-width="130px">
                                  <el-input-number v-model="form.replaceOpenCountMin" :controls="false" :min="1" :step="1" style="width: 150px"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
                <el-card class="box-card" style="margin-top: 20px" v-if="form.playWay == '4' || form.playWay == '1'">
                    <template #header>
                        <div>
                            <span style="font-weight: bold">
                                <el-icon color="red">
                                    <CollectionTag />
                                </el-icon>
                                特殊卡密设置</span>
                        </div>
                    </template>
                    <div class="card-body">
                        <el-row :gutter="24">
                            <el-col :span="24" :offset="0">
                                <el-form-item label="开启特殊卡密" prop="isOpenPrize" label-width="135px">
                                    <el-radio-group v-model="form.cardCollageDetailBo.isOpenPrize">
                                        <el-radio v-for="item in sys_yes_no" :key="item.key" :value="item.value">
                                            {{ item.label }}
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form>
                                    <el-form-item label="" prop="isOpenPrize" label-width="135px"
                                        v-if="form.cardCollageDetailBo.isOpenPrize == '1'">
                                        <el-button type="primary" size="default" @click="openAddSpecial"
                                            :disabled="false">
                                            {{ props.isView ? '查看' : '设置' }}特殊卡密
                                        </el-button>
                                    </el-form-item>
                                </el-form>

                            </el-col>
                        </el-row>
                    </div>
                </el-card>

                <el-card class="box-card" style="margin-top: 20px" v-if="form.playWay == '4'">
                    <template #header>
                        <div>
                            <span style="font-weight: bold">
                                <el-icon color="red">
                                    <CollectionTag />
                                </el-icon>
                                选组随机设置</span>
                        </div>
                    </template>
                    <div style="margin-top: 10px">
                        <el-form-item label="开启剩余随机" prop="isOpenRandom" label-width="135px">
                            <el-radio-group v-model="form.isOpenRandom" :disabled = "true">
                                <el-radio v-for="item in open_or_close" :key="item.key" :value="item.value">
                                    {{ item.label }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-divider content-position="left">
                            <h4 style="color: dodgerblue">
                                球队配置
                            </h4>
                        </el-divider>
                        <div style="display: flex">
                            <div>
                                <el-input-number v-model="defaultPriceValue" :controls="false" :step="0.1"
                                    :precision="2" style="width: 150px"></el-input-number>
                            </div>
                            <div>
                                <el-button type="primary" plain @click="setDefaultPriceValue"
                                    style="margin-left: 10px">设置默认单份售价</el-button>
                            </div>
                        </div>
                        <div style="margin-top: 8px">
                            <el-table :data="form.teamGroupList" class="formTable" border>
                                <el-table-column label="球队" align="center" prop="teamChineseName"></el-table-column>
                                <el-table-column label="数量" align="center" prop="count"></el-table-column>
                                <!--                      <el-table-column label="其他队伍" align="center" prop="isOtner"  >-->
                                <!--                        <template #default="scope">-->
                                <!--                          <el-form-item :prop="'teamGroupList.' + scope.$index + '.isOtner'"  >-->
                                <!--                            <el-switch style="padding-left: 50px" v-model="scope.row.isOtner"  active-value="0" inactive-text="否"-->
                                <!--                                       inactive-value="1" active-text="是"></el-switch>-->
                                <!--                          </el-form-item>-->
                                <!--                        </template>-->
                                <!--                      </el-table-column>-->
                                <el-table-column label="单份售价" align="center" prop="price">
                                    <template #default="scope">
                                        <el-form-item :prop="'teamGroupList.' + scope.$index + '.price'" label-width="0"
                                            :rules="rules.PriceNum">
                                            <el-input-number :controls="false" v-model="scope.row.price" :step="0.1"
                                                style=" width: 100%;" :precision="2"
                                                @change="teamGroupListPriceSum"></el-input-number>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>

                </el-card>
                <el-card class="box-card" style="margin-top: 20px">
                    <template #header>
                        <div>
                            <span style="font-weight: bold">
                                <el-icon color="red">
                                    <CollectionTag />
                                </el-icon>
                                销售信息</span>
                        </div>
                    </template>
                    <div class="card-body">
                        <el-row :gutter="24">
                            <el-col :span="8" :offset="0" v-if="form.playWay != '4'">
                                <el-form-item label="单价" prop="unitPrice">
                                    <el-input-number :controls="false" :precision="2" :min="0" :max="99999"
                                        @change="changeTotailPrice" @click="checkPlayWay" v-model="form.unitPrice"
                                        style="width: 100%;" placeholder="请输入单价" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" :offset="0">
                                <el-form-item label="销售份数" prop="lotCount">
                                    <el-input v-model="form.lotCount" placeholder="请输入销售份数" disabled />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" :offset="0">
                                <el-form-item label="商品总价" prop="totalPrice">
                                    <el-input v-model="form.totalPrice" placeholder="请输入商品总价" disabled />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="是否开启首购优惠" prop="isFirstCheap" label-width="135px">
                            <el-radio-group v-model="form.isFirstCheap">
                                <el-radio v-for="item in sys_yes_no" :key="item.key" :value="item.value">
                                    {{ item.label }}
                                </el-radio>
                            </el-radio-group>
                            <el-form-item label="" label-width="60px" prop="firstBuyPrice"
                                v-if="form.isFirstCheap == '1'">
                                首购优惠价（元）
                                <el-input-number v-model="form.firstBuyPrice" :controls="false" :precision="2" :min="0.1"
                                    :max="999999" placeholder="请输入首单优惠价" />
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="是否限制购买" prop="cardCollageDetailBo.isLimitBuy" label-width="110px">
                            <el-radio-group v-model="form.cardCollageDetailBo.isLimitBuy">
                                <el-radio v-for="item in sys_yes_no" :key="item.key" :value="item.value">
                                    {{ item.label }}
                                </el-radio>
                            </el-radio-group>
                            <el-form-item label="" label-width="10px" prop="cardCollageDetailBo.userLimitCount"
                                v-if="form.cardCollageDetailBo.isLimitBuy == '1'">
                                <span style="margin-right: 10px;">单笔订单最小购买数量</span>
                                <el-input-number style="margin-right: 10px;" v-model="form.cardCollageDetailBo.eachMinBuy" :controls="false"
                                    :precision="0" :min="1" :max="999999"  />
                                <span style="margin-right: 10px;">单笔订单最大购买数量</span>
                                <el-input-number style="margin-right: 10px;" v-model="form.cardCollageDetailBo.eachMaxBuy" :controls="false"
                                    :precision="0" :min="1" :max="999999" />
                                <span style="margin-right: 10px;">拼团下每人最多限购数量</span>
                                <el-input-number style="margin-right: 10px;" v-model="form.cardCollageDetailBo.userLimitCount" :controls="false"
                                    :precision="0" :min="1" :max="999999" placeholder="请输入每人限购数量" />
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="是否定时限购" prop="isFixedBuy" label-width="110px">
                            <el-radio-group v-model="form.cardCollageDetailBo.isFixedBuy">
                                <el-radio v-for="item in sys_yes_no" :key="item.key" :value="item.value">
                                    {{ item.label }}
                                </el-radio>
                            </el-radio-group>
                            <el-form-item label="" label-width="10px" prop="fixedTime"
                                v-if="form.cardCollageDetailBo.isFixedBuy == '1'">
                                限购间隔时长（分钟）
                                <el-input-number v-model="form.cardCollageDetailBo.fixedTime" :controls="false"
                                    :precision="0" :min="1" :max="999999" placeholder="请输入限购间隔时长" />
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="是否开启满减" prop="isMarketing" label-width="110px">
                            <el-radio-group v-model="form.cardCollageDetailBo.isMarketing">
                                <el-radio v-for="item in sys_yes_no" :key="item.key" :value="item.value">
                                    {{ item.label }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="配置满减" label-width="109px"
                            v-if="form.cardCollageDetailBo.isMarketing == '1'">
                            <div style="width: 100%;">
                                <el-row :gutter="24">
                                    <el-col :span="5" :offset="0"
                                        v-for="(item, index) in form.cardCollageDetailBo.fullReducVoList">
                                        <div
                                            style="display: flex;align-items: center;position: relative;padding-bottom: 20px;">
                                            满
                                            <el-form-item label="" label-width="10px">
                                                <el-input-number v-model="item.fullPrice" label="" :min="0" :max="99999"
                                                    :precision="2" :controls="false" style="width: 80px;">
                                                </el-input-number>
                                            </el-form-item>
                                            元,减
                                            <el-form-item label="" label-width="10px" prop="reducPrice">
                                                <el-input-number v-model="item.reducPrice" label="" :min="0"
                                                    :max="99999" :precision="2" :controls="false" style="width: 80px;">
                                                </el-input-number>
                                            </el-form-item>
                                            元
                                            <div class="delBtn" v-if="!props.isView" >
                                                <el-icon @click="delFullReduc(index)">
                                                    <CircleClose />
                                                </el-icon>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="5" :offset="0">
                                        <el-button type="primary" size="default" icon="Plus"
                                            @click="addFullReduc">添加满减</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-form-item>
                        <el-form-item label="是否需要关注才可购买 " prop="isAttentionBuy" label-width="165px">
                            <el-radio-group v-model="form.isAttentionBuy">
                                <el-radio v-for="dict in sys_yes_no" :value="dict.value" :key="dict.value">
                                    {{ dict.label }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否预售" prop="isPresale">
                            <el-radio-group v-model="form.isPresale">
                                <el-radio v-for="item in sys_yes_no" :key="item.value" :value="item.value">
                                    {{ item.label }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <!-- 销售周期  period-->
                        <el-form-item label="销售周期" prop="period">
                            <el-select v-model="form.period" placeholder="请选择销售周期" clearable style="width: 80px;">
                                <el-option v-for="item in 30" :key="item" :label="item" :value="item">
                                </el-option>
                            </el-select>&nbsp;&nbsp;&nbsp;天

                        </el-form-item>
                        <el-form-item label="是否包邮" prop="isPost">
                            <el-radio-group v-model="form.isPost">
                                <el-radio v-for="item in sys_yes_no" :key="item.value" :value="item.value">
                                    {{ item.label }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-row :gutter="24">
                            <el-col :span="6" :offset="0">
                                <el-form-item label="用户只能锁一单" prop="isLockCollage" label-width="120px">
                                    <el-radio-group v-model="form.cardCollageDetailBo.isLockCollage">
                                        <el-radio v-for="item in open_or_close" :key="item.value" :value="item.value">
                                            {{ item.label }}
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="15" :offset="0">
                                <el-form-item label="取消订单继续购买" prop="isCancelCollageLock"
                                    v-if="form.cardCollageDetailBo.isLockCollage == '1'" label-width="130px">
                                    <el-radio-group v-model="form.cardCollageDetailBo.isCancelCollageLock">
                                        <el-radio v-for="item in sys_yes_no" :key="item.value" :value="item.value">
                                            {{ item.label }}
                                        </el-radio>
                                    </el-radio-group>
                                    <b style="color: #f56c6c; margin-left: 20px; font-size: 14px;">注:用户取消订单是否可立即继续购买,否则为系统锁单时间结束可继续购买</b>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="本期好卡（选填）" prop="cardCollageCurrentCardList" label-width="134px">
                            <image-upload v-model="form.cardCollageCurrentCardList" :limit="100"></image-upload>
                        </el-form-item>
                    </div>
                </el-card>
                <el-card class="box-card" style="margin-top: 20px">
                    <template #header>
                        <div>
                            <span style="font-weight: bold">
                                <el-icon color="red">
                                    <CollectionTag />
                                </el-icon>
                                拼团活动</span>
                        </div>
                    </template>
                    <div class="card-body">
                        <el-form-item label="开启活动说明" prop="isActivityExplain" label-width="110px">
                            <el-radio-group v-model="form.isActivityExplain" @change=changeExplainInfo>
                                <el-radio v-for="dict in sys_yes_no" :value="dict.value" :key="dict.value">
                                    {{ dict.label }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="" label-width="0" v-if="form.isActivityExplain == '1'">
                            <el-table :data="form.cardCollageActivityExplains" border max-height="500px">
                                <el-table-column label="序号" align="center" prop="sortNumber" width="180px">
                                    <template #default="scope">
                                        <span style="opacity: 0;">1</span>
                                        {{ `活动说明${Number(scope.$index) + 1}` }}
                                        <span style="opacity: 0;">{{ scope.row.sortNumber =Number(scope.$index) + 1
                                            }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="活动名称" align="center" width="260px">
                                    <template #default="scope">
                                        <el-form-item label=""
                                            :prop="'cardCollageActivityExplains.' + scope.$index + '.explainName'"
                                            label-width="" :rules="rules.explainName">
                                            <el-input v-model="scope.row.explainName" placeholder="请输入活动名称" />
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="活动说明" align="center">
                                    <template #default="scope">
                                        <el-form-item label=""
                                            :prop="'cardCollageActivityExplains.' + scope.$index + '.explainInfo'"
                                            label-width="" :rules="rules.explainInfo">
                                            <el-input v-model="scope.row.explainInfo" placeholder="请输入活动说明" />
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" align="center" prop="sortNumber" width="180px">
                                    <template #default="scope">
                                        <el-popconfirm title="确定要删除该条榜单吗？" icon-color="red"
                                            @confirm="ActivityListHandle(scope.$index, 'del')">
                                            <template #reference>
                                                <el-button type="danger" icon="Delete" circle></el-button>
                                            </template>
                                        </el-popconfirm>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                        <div align="center" v-if="form.isActivityExplain == '1' && !props.isView">
                            <el-link type="success" @click="ActivityListHandle('index', 'add')"
                                style="color: hotpink"><el-icon>
                                    <Plus />
                                </el-icon>添加拼团活动</el-link>
                        </div>
                    </div>
                </el-card>

                <el-card class="box-card" style="margin-top: 20px">
                    <template #header>
                        <div>
                            <span style="font-weight: bold">
                                <el-icon color="red">
                                    <CollectionTag />
                                </el-icon>
                                拼团榜单</span>
                        </div>
                    </template>
                    <div class="card-body">
                        <el-row :gutter="24">
                            <el-col :span="4" :offset="0">
                                <el-form-item label="开启拼团榜单" prop="isCollageRanking" label-width="110px">
                                    <el-radio-group v-model="form.isCollageRanking" @change="changeIsCollageRanking">
                                        <el-radio v-for="dict in sys_yes_no" :value="dict.value" :key="dict.value">
                                            {{ dict.label }}
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" :offset="0" v-if="form.isCollageRanking == '1'">
                                <el-form-item label="榜单名称" prop="rankingName">
                                    <el-input v-model.trim="form.rankingName" show-word-limit :maxlength="50" placeholder="请输入榜单名称" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!-- 配置榜单（选填） -->
                        <el-form-item label="" label-width="0" v-if="form.isCollageRanking == '1'">
                            <el-table :data="form.collageRankingPrizes" border>
                                <el-table-column label="排名" align="center" prop="sortNumber" width="180px">
                                    <template #default="scope">
                                        {{ `第 ${Number(scope.$index) + 1} 名` }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="奖品" align="center" prop="prize">
                                    <template #default="scope">
                                        <div class="specialForm">
                                            <div class="specialFormItem">
                                                <el-form-item label="奖品名称"
                                                    :prop="'collageRankingPrizes.' + scope.$index + '.prize'"
                                                    label-width="80px" :rules="rules.prize">
                                                    <el-input v-model.trim="scope.row.prize" :maxlength="50" show-word-limit
                                                        placeholder="请输入奖品名称" />
                                                </el-form-item>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" align="center" prop="sortNumber" width="180px">
                                    <template #default="scope">
                                        <el-popconfirm title="确定要删除该条榜单吗？" icon-color="red"
                                            @confirm="prizesListHandle(scope.$index, 'del')">
                                            <template #reference>
                                                <el-button type="danger" icon="Delete" circle></el-button>
                                            </template>
                                        </el-popconfirm>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                        <div align="center" v-if="form.isCollageRanking == '1' && !props.isView">
                            <el-link type="success" @click="prizesListHandle('index', 'add')"
                                style="color: hotpink"><el-icon>
                                    <Plus />
                                </el-icon>添加拼团榜单</el-link>
                        </div>
                    </div>
                </el-card>

                <el-card class="box-card" style="margin-top: 20px">
                    <template #header>
                        <div>
                            <span style="font-weight: bold">
                                <el-icon color="red">
                                    <CollectionTag />
                                </el-icon>
                                商品信息</span>
                        </div>
                    </template>
                    <div class="card-body">
                        <el-form-item label="拼团封面" prop="imagePath">
                            <image-upload v-model="form.imagePath" :limit="1"></image-upload>
                        </el-form-item>
                        <el-form-item label="轮播图" prop="rotationImagePath">
                            <image-upload v-model="form.rotationImagePath" :limit="10"></image-upload>
                        </el-form-item>
                        <el-form-item label="来源凭证" prop="cardCollageDetailBo.proofImagePath" :rules="rules.proofImagePath">
                            <image-upload v-model="form.cardCollageDetailBo.proofImagePath" :limit="10"></image-upload>
                        </el-form-item>
                        <el-form-item label="原箱视频" prop="cardCollageDetailBo.boxVideoPath" :rules="rules.boxVideoPath">
                            <file-upload v-model="form.cardCollageDetailBo.boxVideoPath"
                                :fileType="['mp4', 'avi', 'wmv', 'flv']"></file-upload>
                        </el-form-item>
                        <el-form-item label="拼团介绍" prop="remark">
                            <editor v-model="form.remark" :rows="8" :readOnly="props.isView"
                                :placeholder="props.isView ? ' ' : '请输入拼团介绍'" style="width: 100%;" />
                        </el-form-item>
                    </div>
                </el-card>
            </el-form>
        </el-scrollbar>
        <div class="footerButton" v-if="showBtnGroup">
            <el-button v-if="!props.isView && Number(form.collageStatus) !== 3" type="primary" @click="handleSubmit">确
                定</el-button>
            <el-button v-if="!props.isView && Number(form.collageStatus) == 3" type="success" @click="handleSubmitAgainNoExamine">变更未审核</el-button>
            <el-button v-if="!props.isView && Number(form.collageStatus) == 3" type="primary" @click="handleSubmitAgainInPass">提交审核</el-button>
            <el-button @click="cancle"> {{ props.isView ? '关 闭' : '取 消' }} </el-button>
        </div>
        <el-dialog v-model="upload.visible" :title="props.isView?'查看特殊卡密':'添加特殊卡密'" width="1500px">
            <addSpecialTable v-if="upload.visible" :cardCategoryId="form.cardCategoryId" @submit="submitSpecialList"
                @close="closeSpecialList" :isView="props.isView"
                :arrayList="form.cardCollageDetailBo.cardCollageSpecialList" />
        </el-dialog>
        <el-dialog v-model="chooseCarmi.visible" title="选择卡密" width="1000px" destroy-on-close>
            <addChooseCarmi v-if="chooseCarmi.visible" @submit="submitChooseCarmi" @close="closeChooseCarmi" />
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import addSpecialTable from './addSpecialTable.vue'
import addChooseCarmi from './addChooseCarmi.vue'
import {
    calculateTotalPrice,
    getCardCollage,
    getCardSeriesLotCount, getGourpTeamByCardCategory,
    sumCardCollageTotalMoney
} from '@/api/workflow/cardCollage/index';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { CardCollageFormVo } from '@/api/workflow/cardCollage/types';
import { previewCard, queryCardCategoryByName } from '@/api/workflow/category';
const { season, manufacturer, sys_yes_no, collage_play_way, open_or_close, yes_or_no } = toRefs<any>(proxy?.useDict('season', 'manufacturer', 'sys_yes_no', 'collage_play_way', 'open_or_close', 'yes_or_no'));
const cardCollageFormRef = ref<FormInstance>()
const cardCategoryName = ref()
const defaultPriceValue = ref(1)
const collagePlayWayList = ref([])
const emit = defineEmits(['submit', 'cancle','submitAgain'])

const initFormData: CardCollageFormVo = {
    isFirstCheap: '0',
    isPresale: '0',
    isAttentionBuy: '0',
    cardCategoryId: '',
    cardCategoryName: undefined,
    isActivityExplain: '0',
    isCollageRanking: '0',
    isOpenRandom: '0',
    isPost: '1',
    isReplaceOpen: '0',
    imagePath: '',
    rotationImagePath: '',
    cardCollageDetailBo: {
        isGive: '0',
        fullReducVoList: [

        ],
        isLockCollage: '1',
        isCancelCollageLock: '1',
        isFixedBuy: '0',
        fixedTime: 1,
        isAutomaticShelf: '0',
        isOpenPrize: '0',
        isMarketing: '0',
        isLimitBuy: '0',
        cardCollageSpecialList: [],
        proofImagePath: '',
        boxVideoPath: '',
    },
    cardCollageActivityExplains: [//拼团活动
        // {
        //     sortNumber: 0,
        //     explainName: undefined,
        //     explainInfo: undefined, //说明
        // }
    ],
    collageRankingPrizes: [//榜单
        // { sortNumber: undefined, prize: undefined, }
    ],
    teamGroupList: [],
    remark: "<p>[产品名称] : 神话录系列卡包</p><p>[活动详情]： </p><p>[客服微信]：</p><p>[公示时间]：拼团完成后24小时内开卡(具体时间以商家通知为准)</p><p>[公示方式]：销售完成后商家将在卡玩所提供的平台进行公示 </p><p>[获卡方式]：拼团完成后48小时内，商家将在卡玩 APP内上传报告。</p><p>[销售时限]:本次销售时间为30天。如30天内未销售完毕，则所有款项通过系统原路退还。除此特殊情况外，其余情况均无法提供退款服务。</p><p>[活动规则] 1.活动规则由商家制定，卡玩提供平台/技术支持，入驻商家须提供商品、公示等相关售后服务 2.根据厂商官方所公布的Checklist，(解锁卡密如出现翻译以及图片错误，则以原版英文卡密信息为准) 3.活动方式为即买即随，用户付款完成后，将获赠得对应下单份数的随机卡密。</p>",
}
const showBtnGroup = ref(false)
const upload = reactive<DialogOption>({
    visible: false,
    title: ''
});

const chooseCarmi = reactive<DialogOption>({
    visible: false,
    title: '选择卡密'
});

const data = reactive<PageData<CardCollageFormVo, any>>({
    form: { ...initFormData },
    rules: {
        collageName: [
            { required: true, message: "拼团名称不能为空", trigger: "blur" }
        ],
        collageCode: [
            { required: true, message: "拼团编码不能为空", trigger: "blur" }
        ],
        collageModule: [
            { required: true, message: "拼团类别不能为空", trigger: "blur" }
        ],
        cardCategoryId: [
            { required: true, message: "卡类id关联不能为空", trigger: "blur" }
        ],
        playWay: [
            { required: true, message: "玩法(字典)不能为空", trigger: "blur" }
        ],
        specifications: [
            { required: true, message: "规格不能为空", trigger: "blur" }
        ],
        count: [
            { required: true, message: "数量不能为空", trigger: "blur" }
        ],
        sheetsNumber: [
            { required: true, message: "张数不能为空", trigger: "blur" }
        ],
        lotCount: [
            { required: true, message: "lot数不能为空", trigger: "blur" }
        ],
        lockLot: [
            { required: true, message: "锁单lock数不能为空", trigger: "blur" }
        ],
        surplusLot: [
            { required: true, message: "剩余数量不能为空", trigger: "blur" }
        ],
        unitPrice: [
            { required: true, message: "单价不能为空", trigger: "blur" }
        ],
        isPost: [
            { required: true, message: "是否包邮不能为空", trigger: "blur" }
        ],
        startTime: [
            { required: true, message: "开始时间不能为空", trigger: "blur" }
        ],
        imagePath: [
            { required: true, message: "拼团封面不能为空", trigger: "blur" }
        ],
        remark: [
            { required: true, message: "备注不能为空", trigger: "blur" }
        ],
        collageStatus: [
            { required: true, message: "拼团状态不能为空", trigger: "change" }
        ],
        isActivityExplain: [
            { required: true, message: "是否开启活动说明不能为空", trigger: "blur" }
        ],
        isCollageRanking: [
            { required: true, message: "是否开启拼团榜单不能为空", trigger: "blur" }
        ],
        rankingName: [
            { required: true, message: "拼团榜单名称不能为空", trigger: "blur" }
        ],
        totalPrice: [
            { required: true, message: "商品总价不能为空", trigger: "blur" }
        ],
        rotationImagePath: [
            { required: true, message: "轮播图不能为空", trigger: "blur" }
        ],
        boxVideoPath: [
            { required: true, message: "原箱视频不能为空", trigger: "blur" }
        ],
        sortType: [
            { required: true, message: "排序类型不能为空", trigger: "change" }
        ],
        sortNumber: [
            { required: true, message: "排序序号不能为空", trigger: "blur" }
        ],
        sortScore: [
            { required: true, message: "排序分值不能为空", trigger: "blur" }
        ],
        isAttentionBuy: [
            { required: true, message: "是否关注后购买不能为空", trigger: "blur" }
        ],
        isPresale: [
            { required: true, message: "是否预售不能为空", trigger: "blur" }
        ],
        currentCard: [
            { required: true, message: "本期好卡不能为空", trigger: "blur" }
        ],
        isFirstCheap: [
            { required: true, message: "是否首购优惠不能为空", trigger: "blur" }
        ],
        period: [
            { required: true, message: "销售周期不能为空", trigger: "blur" }
        ],
        firstBuyPrice: [
            { required: true, message: "首单优惠价不能为空", trigger: "blur" }
        ],
        isAutomaticShelf: [
            { required: true, message: "是否自动上架不能为空", trigger: "blur" }
        ],
        explainName: [
            { required: true, message: "请输入活动名称", trigger: "change" }
        ],
        explainInfo: [
            { required: true, message: "请输入活动内容", trigger: "change" }
        ],
        isReplaceOpen: [
              { required: true, message: "请选择是否代搓", trigger: "change" }
          ],
        prize: [
            { required: true, message: "请输入奖品名称", trigger: "change" }
        ]
    },
    queryParams: {
    },
});

const { form, rules } = toRefs(data);


const props = defineProps({
    collageId: {
        type: String,
        default: ''
    },
    collageModule: {
        type: String,
        default: ''
    },
    isView: {
        type: Boolean,
        default: false
    }
});


const setDefaultPriceValue = () => {
    if (Number(defaultPriceValue.value) <= 0) {
        ElMessage.error('单份售价必须大于0')
        return;
    }
    form.value.teamGroupList = form.value.teamGroupList.map((item) => {
        return {
            ...item,
            price: defaultPriceValue.value,
        }
    })
    teamGroupListPriceSum()
};

const getInfo = async (id: string) => {
    const res = await getCardCollage(id);
    const data = res.data
    const formData = {
        ...data,
        cardCollageDetailBo: JSON.parse(JSON.stringify(data.cardCollageDetailVo)),
        teamGroupList: JSON.parse(JSON.stringify(data.teamGroupVoList)),
    }
    formData.cardCollageDetailBo.cardCollageSpecialList = JSON.parse(JSON.stringify(data.cardCollageSpecialList))
    if (formData.specialVoList) {
        delete formData.specialVoList
    }
    if (formData.cardCollageSpecialList) {
        delete formData.cardCollageSpecialList
    }
    if (formData.teamGroupList) {
        delete formData.teamGroupVoList
    }
    delete formData.cardCollageDetailVo
    form.value = formData;
    let playList = data.playWayList.split(",");
    collagePlayWayList.value = [];
    playList.forEach((item) => {
      collage_play_way.value.forEach((item1) => {
        if (item == item1.value) {
          collagePlayWayList.value.push(item1)
        }
      })
    });
    showBtnGroup.value = true
}

const teamGroupListPriceSum = () => {
    let arr = []
    let arr2 = []
    arr2 = JSON.parse(JSON.stringify(form.value.teamGroupList))
    let min = undefined;
    arr2.forEach((item) => {
        let obj = {}
        obj["price"] = item.price ? item.price : 0
        obj["count"] = item.count
        if (min == null || min == '' || min == undefined) {
            min = item.price;
        } else {
            min = Math.min(min, item.price);
        }
        arr.push(obj)
    })
    form.value.unitPrice = min;
    const params = {
        priceVoList: arr,
    }
    sumCardCollageTotalMoney({ priceVoList: arr }).then((res) => {
        form.value.totalPrice = Number(res.data)
        form.value.costPrice = undefined;
        form.value.profitRatio = undefined;
    })
};
const handleSubmit = () => {
    cardCollageFormRef.value.validate((valid: boolean) => {
        if (valid) {
            emit('submit', form.value)
        }
    });
};

const handleSubmitAgainNoExamine = () => {
  form.value.collageStatus = '1';
  handleSubmitAgain();
}

const handleSubmitAgainInPass = () => {
  form.value.collageStatus = '2';
  handleSubmitAgain();
}

const handleSubmitAgain = () => {
    cardCollageFormRef.value.validate((valid: boolean) => {
        if (valid) {
            emit('submitAgain', form.value)
        }
    });
}

const cancle = () => {
    emit('cancle')
}
const reset = () => {
    form.value = { ...initFormData };
    cardCollageFormRef.value?.resetFields();
};

const selectCardMi = () => {
    chooseCarmi.visible = true
}
function changeExplainInfo() {
    if (form.value.isActivityExplain == '1' && form.value.cardCollageActivityExplains.length == 0) {
        form.value.cardCollageActivityExplains = [{
            collageId: form.value.id,
            //   shopId: this.$store.state.user.shop.shopId || form.value.shopId,
            sortNumber: undefined,
            explainInfo: undefined,
        }]
    }
}
// 榜单数组操作
const ActivityListHandle = (index: any, operation: string) => {
    switch (operation) {
        case 'add':
            form.value.cardCollageActivityExplains.push({
                collageId: form.value.id,
                // shopId: $store.state.user.shop.shopId || this.form.shopId,
                sortNumber: undefined,
                explainInfo: '',
            })
            break;
        case 'del':
            if (form.value.cardCollageActivityExplains.length == 1) {
                form.value.cardCollageActivityExplains = [{
                    collageId: form.value.id,
                    //   shopId: this.$store.state.user.shop.shopId || form.value.shopId,
                    sortNumber: undefined,
                    explainInfo: undefined,
                }]
                return
            }
            form.value.cardCollageActivityExplains.splice(index, 1)
            break;
        default:
            break;
    }
}

function changeIsCollageRanking() {
    if (form.value.isCollageRanking == '1' && form.value.collageRankingPrizes.length == 0) {
        form.value.collageRankingPrizes = [{
            collageId: form.value.id,
            // shopId: this.$store.state.user.shop.shopId || form.value.shopId,
            sortNumber: undefined,
            prize: undefined,
        }]
    }
}
const prizesListHandle = (index: any, operation: string) => {
    switch (operation) {
        case 'add':
            form.value.collageRankingPrizes.push({
                collageId: form.value.id,
                // shopId: this.$store.state.user.shop.shopId || form.value.shopId,
                sortNumber: undefined,
                prize: undefined,
            })
            break;
        case 'del':
            if (form.value.collageRankingPrizes.length == 1) {
                form.value.collageRankingPrizes = [{
                    collageId: form.value.id,
                    //   shopId: this.$store.state.user.shop.shopId || form.value.shopId,
                    sortNumber: undefined,
                    prize: undefined,
                }]
                return
            }
            form.value.collageRankingPrizes.splice(index, 1)
            break;
        default:
            break;
    }
}

const addFullReduc = () => {
  if (Object.prototype.toString.call(form.value.cardCollageDetailBo.fullReducVoList) !== '[object Array]' ) {
    form.value.cardCollageDetailBo.fullReducVoList = []
  }
  form.value.cardCollageDetailBo.fullReducVoList.push({
    fullPrice: undefined,// 满
    reducPrice: undefined,//元,减
  })
}

const delFullReduc = (index: any) => {
    form.value.cardCollageDetailBo.fullReducVoList.splice(index, 1)
}

const getCardSeriesLotCountFun = () => {
    const params = {
        cardCategoryId: form.value.cardCategoryId,
        playWay: form.value.playWay,
        collageModule: form.value.collageModule,
    }
    getCardSeriesLotCount(params).then(res => {
        form.value.lotCount = res.data
    })
    if (form.value.playWay == '4') { //选组随机
        form.value.isOpenRandom='0'
        getTeamGroupList();
    } else {
        form.value.teamGroupList = [];
    }
    form.value.totalPrice = null;
    form.value.unitPrice = null;
}

const getTeamGroupList = () => {
    const params = {
        cardCategoryId: form.value.cardCategoryId,
        playWay: form.value.playWay,
    }
    getGourpTeamByCardCategory(params).then(res => {
        form.value.teamGroupList = res.data;
    })
}

const changeTotailPrice = () => {
    const params = {
        price: form.value.unitPrice,
        count: form.value.lotCount,
    }
    calculateTotalPrice(params).then(res => {
        form.value.totalPrice = res.data
    })
}

const checkPlayWay = () => {
    if (form.value.playWay == '' || form.value.playWay == undefined || form.value.playWay == null) {
        ElMessage.error('玩法不能为空')
    }
}
const openAddSpecial = () => {
    upload.visible = true
}

const submitSpecialList = (data: any) => {
    upload.visible = false
    let arr = JSON.parse(JSON.stringify(data));
    form.value.cardCollageDetailBo.cardCollageSpecialList = arr

}
const closeSpecialList = () => {
    upload.visible = false
}

const submitChooseCarmi = (data: any) => {
    form.value.cardCategoryId = data.id;
    cardCategoryName.value = data.cardName;
    let playList = data.playWay.split(",");
    collagePlayWayList.value = [];
    playList.forEach((item) => {
        collage_play_way.value.forEach((item1) => {
            if (item == item1.value) {
                collagePlayWayList.value.push(item1)
            }
        })
    });
    form.value.lotCount = '';
    form.value.totalPrice = '';
    form.value.unitPrice = '';
    form.value.playWay = '';
    form.value.cardCollageDetailBo.cardCollageSpecialList = [];
    chooseCarmi.visible = false
}

const closeChooseCarmi = () => {
    chooseCarmi.visible = false
}

watch(
    () => props.collageId,
    (val) => {

        // 在这里添加你需要执行的逻辑
        if (val) {
            getInfo(props.collageId)
            // 例如，调用某个方法来获取新的数据
            //   fetchData(newVal);
        } else {
            form.value = { ...initFormData };
            showBtnGroup.value = true
            cardCollageFormRef.value?.resetFields();
        }
    },
    { immediate: true, deep: true } // 立即执行一次回调
);
defineExpose({
    reset,
})
</script>
<style lang="scss" scoped>
.footerButton {
    display: flex;
    justify-content: center;
    align-self: center;
    text-align: center;
}

.delBtn {
    position: absolute;
    top: -10px;
    right: 10px;
}
</style>
